<!--
 * @Author: your name
 * @Date: 2020-09-01 11:26:12
 * @LastEditTime: 2020-09-07 09:53:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin-management\web\src\views\system\menu-dialog.vue
-->

<template>
  <CustomDialog v-model:visible="visibleDialog" @confirm="handleOk">
    <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
      <template v-for="item in managementForm" :key="item.key">
        <a-form-item :label="item.label" v-if="item.key === 'admin_role_id'">
          <a-select v-model:value="data.record[item.key]" @change="handleChange">
            <a-select-option
              v-for="roleItem in roleList.data"
              :key="roleItem.admin_role_id"
              :value="roleItem.admin_role_id"
            >
              {{ roleItem.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <FormItem v-else :data="data.record" :item="item" />
      </template>
    </a-form>
  </CustomDialog>
</template>

<script>
import { computed, getCurrentInstance, ref, reactive } from 'vue';
import CustomDialog from '../../components/custom-dialog/index.vue';
import FormItem from '../../components/form-item/index.vue';
export default {
  name: 'ManagementDialog',
  components: {
    CustomDialog,
    FormItem
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  setup(props, { emit }) {
    let { ctx } = getCurrentInstance();
    // console.log('props.allRole :>> ', props.allRole);
    let visibleDialog = computed({
      get: () => props.visible,
      set: (val) => {
        emit('update:visible', false);
      }
    });

    let roleList = reactive({
      data: []
    });

    let managementForm = [
      {
        label: '用户名',
        key: 'username',
        type: 1
      },
      {
        label: '密码',
        key: 'password',
        type: 1
      },
      {
        label: '手机号码',
        key: 'mobile',
        type: 1
      },
      {
        label: '电子邮箱',
        key: 'email',
        type: 1
      },
      {
        label: '角色权限',
        key: 'admin_role_id',
        type: 1
      }
    ];
    let loading = ref(false);

    function handleOk() {
      if (props.data.isAdd) {
        saveAdd();
      } else {
        saveEdit();
      }
    }

    function handleChange(value) {
      props.data.record.admin_role_id = value;
    }

    async function saveAdd() {
      let res = await ctx.$fetch.post('/manager.user/add', props.data.record);
      ctx.$message.success(res.msg);
      emit('refresh');
      emit('update:visible', false);
    }

    async function saveEdit() {
      let res = await ctx.$fetch.post('/manager.user/edit', props.data.record);
      ctx.$message.success(res.msg);
      emit('refresh');
      emit('update:visible', false);
    }

    let replaceFields = {
      title: 'name',
      value: 'admin_user_id',
      key: 'admin_user_id',
      children: 'child'
    };

    async function getRole() {
      let res = await ctx.$fetch.post('/manager.role/index');
      console.log(res.data);
      roleList.data = res.data;
    }
    getRole();

    return {
      visibleDialog,
      roleList,
      managementForm,
      handleOk,
      handleChange,
      replaceFields,
      getRole,
      loading
    };
  }
};
</script>
